<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>世遗景点列表 - 泉州文化地图</title>

    <!-- 字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">

    <!-- 样式 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
    
    <!-- Leaflet 地图库 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" defer></script>
</head>
<body>

<!-- 容器包裹整个页面内容 -->
<div class="page-wrapper">

    <!-- 顶部信息栏 -->
    <div class="top-bar">
        <div class="container">
            <span><i class="fas fa-phone"></i> 旅游咨询：1234-567890</span>
            <span><i class="fas fa-clock"></i> 开放时间：08:00 - 18:00</span>
            <div class="language-switcher">
                <a href="#" class="active">中文</a>
                <a href="#">English</a>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <header class="navbar">
        <div id="navigationBar">
            <div class="logo">
                <img src="images/logo.jpg" alt="泉州文化地图">
                <h1>智游泉州</h1>
            </div>
            <nav class="main-nav">
                <ul class="nav-menu">
                    <li class="nav-item"><a href="index.html">首页</a></li>
                    <li class="nav-item active"><a href="heritage-list.html">世遗景点</a></li>
					<li class="nav-item dropdown">
					  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
					    特色体验
					  </a>
					  <div class="dropdown-menu">
						<a class="dropdown-item" href="intangible-culture.html">非遗传承</a>
						<a class="dropdown-item" href="food-map.html">美食打卡</a>
					</li>
                    <li class="nav-item"><a href="historical-research.html">历史研学</a></li>
                    <li class="nav-item"><a href="study-materials.html">学习资源</a></li>
                    <li class="nav-item"><a href="ai-itinerary.html">AI行程规划</a></li>
                    <li class="nav-item user-actions">
                        <a href="user-center.html" class="user-icon"><i class="fas fa-user-circle"></i></a>
                    </li>
                </ul>
            </nav>
            <button class="menu-toggle" aria-label="切换导航菜单">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

    <!-- 主体内容 -->
    <main class="main-content container">

        <!-- 页面标题 -->
        <h2 class="section-title">泉州世遗景点一览</h2>

        <!-- 世遗背景介绍 -->
        <section class="intro-section">
            <div class="intro-text">
                <h3>泉州：宋元中国的世界海洋商贸中心</h3>
                <p>
                    泉州于2021年被列入联合国教科文组织《世界遗产名录》，成为中国第56项世界遗产。
                    这座千年古都见证了古代海上丝绸之路的辉煌，22处代表性古迹遗址展现了多元文化交融的历史画卷。
                </p>
            </div>
            <div class="intro-image">
                <img src="images/slider1.jpg" alt="泉州全景图">
            </div>
        </section>

        <!-- 地图展示 -->
        <section class="map-section">
            <h3 class="section-subtitle">泉州世遗点位地图</h3>
            <div id="heritage-map" style="height: 400px; border-radius: 8px; overflow: hidden;"></div>
        </section>

        <!-- 筛选器 -->
        <section class="filter-section">
            <h3 class="section-subtitle">筛选景点</h3>
            <div class="filters">
                <select id="typeFilter">
                    <option value="">全部类型</option>
                    <option value="景点">景点</option>
                </select>
                <select id="timeFilter">
                    <option value="">全部开放时间</option>
                    <option value="全天">全天开放</option>
                    <option value="08:00 - 18:00">日间开放</option>
                </select>
            </div>
        </section>

        <!-- 景点卡片列表 -->
        <div class="card-grid heritage-list" id="heritageCards">
            <div class="card" data-type="景点" data-time="08:00 - 18:00">
                <img src="images/recommend1.jpeg" alt="开元寺">
                <div class="card-content">
                    <h3>开元寺</h3>
                    <p>始建于唐垂拱二年（686年），是福建省规模最大的佛教寺院……</p>
                    <div class="card-footer">
                        <span>开放时间：08:00 - 18:00</span>
                        <span>门票：免费</span>
                    </div>
                </div>
            </div>

            <div class="card" data-type="景点" data-time="08:30 - 17:30">
                <img src="images/recommend2.jpg" alt="清净寺">
                <div class="card-content">
                    <h3>清净寺</h3>
                    <p>中国现存最早的伊斯兰教寺宇，展现多元文化交融的历史见证。</p>
                    <div class="card-footer">
                        <span>开放时间：08:30 - 17:30</span>
                        <span>门票：免费</span>
                    </div>
                </div>
            </div>

            <div class="card" data-type="景点" data-time="全天">
                <img src="images/recommend3.jpeg" alt="洛阳桥">
                <div class="card-content">
                    <h3>洛阳桥</h3>
                    <p>中国古代四大名桥之一，开创了梁式石桥建造的新技术。</p>
                    <div class="card-footer">
                        <span>开放时间：全天</span>
                        <span>门票：免费</span>
                    </div>
                </div>
            </div>

            <div class="card" data-type="景点" data-time="08:00 - 17:00">
                <img src="images/slider1.jpg" alt="九日山">
                <div class="card-content">
                    <h3>九日山</h3>
                    <p>古代海上丝绸之路起点之一，摩崖石刻众多，历史悠久。</p>
                    <div class="card-footer">
                        <span>开放时间：08:00 - 17:00</span>
                        <span>门票：30元</span>
                    </div>
                </div>
            </div>

            <div class="card" data-type="景点" data-time="08:00 - 17:30">
                <img src="images/slider2.jpeg" alt="天后宫">
                <div class="card-content">
                    <h3>天后宫</h3>
                    <p>供奉妈祖的重要庙宇，闽南地区最具代表性的海神信仰圣地。</p>
                    <div class="card-footer">
                        <span>开放时间：08:00 - 17:30</span>
                        <span>门票：20元</span>
                    </div>
                </div>
            </div>

            <div class="card" data-type="景点" data-time="全天">
                <img src="images/slider3.jpg" alt="安平桥">
                <div class="card-content">
                    <h3>安平桥</h3>
                    <p>中国现存最长的古代跨海石桥，有“天下无桥长此桥”之称。</p>
                    <div class="card-footer">
                        <span>开放时间：全天</span>
                        <span>门票：免费</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 视频推荐 -->
        <section class="video-section">
            <h3 class="section-subtitle">泉州文旅宣传片</h3>
            <div class="video-wrapper">
                <iframe width="100%" height="400"
                        src="//player.bilibili.com/player.html?isOutside=true&aid=709374235&bvid=BV1vD4y1f7zP&cid=1420013991&p=1"
                        title="泉州世遗宣传片"
                        frameborder="0"
                        allowfullscreen></iframe>
            </div>
        </section>

    </main>

    <!-- 回到顶部按钮 -->
    <a href="#top" class="back-to-top" aria-label="回到顶部">
        <i class="fas fa-arrow-up"></i>
    </a>

    <!-- 页脚 -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-section">
                    <h3>关于本站</h3>
                    <p>"智游泉州"文旅平台致力于打造一站式泉州文化旅游服务平台，整合泉州优质旅游资源，为游客提供智能化、个性化的旅行体验。</p>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">使用条款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关注我们</h3>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 泉州文化旅游发展有限公司 版权所有</p>
                <p>技术支持：<a href="#">2人团队</a></p>
            </div>
        </div>
    </footer>

</div>

<!-- 自定义 JS -->
<script src="js/heritage.js" defer></script>
</body>
</html>